<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/html/common/head.jsp"%>
<html>
<head>
	<!-- 必须库 Jquery-->
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<!-- 必须库 checkError-->
	<script type="text/javascript" src="js/error/js/checkError.js"></script>
	
	<script type="text/javascript">
		function demo1(){
		  	var json = '{"msg":"这是模拟的操作消息[成功]","state":0,"result":{"len":2,"head":["id","name","sex","age"],"data":[[1,"张三","男",25],[2,"里斯","女",22]]}}';
			var obj = DealAndShowMsg(json,true,true);
			initTable(obj);
		}
		function demo1_1(){
		  	var json = '{"msg":"这是模拟的操作消息[失败]","state":1,"result":{"len":2,"head":["id","name","sex","age"],"data":[[1,"张三","男",25],[2,"里斯","女",22]]}}';
			var obj = DealAndShowMsg(json,true,true);
			initTable(obj);//这里没有加载table 是因为initTable()中对json的state进行了过滤
		}
		function demo1_2(){
		  	var json = '{"msg":"这是模拟的操作消息[成功]","state":0,"result":{"len":2,"head":["id","name","sex","age"],"data":[[1,"张三","男",25],[2,"里斯","女",22]]}}';
			var obj = DealAndShowMsg(json,false,false);
			initTable(obj);
		}
		function demo1_3(){
		  	var json = '{"msg":"这是模拟的操作消息[失败]","state":1,"result":{"len":2,"head":["id","name","sex","age"],"data":[[1,"张三","男",25],[2,"里斯","女",22]]}}';
			var obj = DealAndShowMsg(json,false,false);
			initTable(obj);
		}
		function demo2(){
			var json = '{"msg":"","state":-1,"result":{}}';
			DealAndShowMsg(json,true,true);
		}
		function demo3(){
			var json = '{"msg":"","state":2,"result":{}}';
			DealAndShowMsg(json,true,true);
		}
		function demo4(){
			var json = '{"msg":"","state":0,"result":{}}';
			DealAndShowDiyMsg(json,"这是DIY成功消息","这是DIY失败消息");
		}
		function demo5(){
			var json = '{"msg":"","state":1,"result":{}}';
			DealAndShowDiyMsg(json,"这是DIY成功消息","这是DIY失败消息");
		}
		
		function initTable(json){
			if(json!=null && json.state==0){
				var params = new Array("id","name","sex","age");
				Loadtable(json,params,"tb_demo");
			}
		}
		
		function Loadtable(json, params, tableId){
			var phArray = new Array();
			var count = 0;
			if (params != null) {
				$(params).each(function(pIndex, pData) {
					$.each(json.result.head, function(hIndex, hData) {
						if (pData == hData) {
							phArray[count++] = hIndex;
						}
					});
				});
			}
			if (json.result.data != null) {
				$.each(json.result.data, function(index, dt) {
					$("table[id='" + tableId + "']").append("<tr></tr>");
					$(phArray).each(function(phIndex, data) {
						$.each($(dt), function(dtIndex, d) {
							if (dtIndex == data) {
								$("table[id='" + tableId + "'] tr:last").append("<td>" +  (d === null ? " " : d) + "</td>");
							}
						});
					});
				});
			}
		}
	</script>
</head>
<body>
	<input type="button" onclick="demo1()" value="处理数据[state=0 and have data,tip msg]"/>
	<input type="button" onclick="demo1_1()" value="处理数据[state=1 and have data,tip msg]"/>
	<input type="button" onclick="demo1_2()" value="处理数据[state=0 and have data,not tip msg]"/>
	<input type="button" onclick="demo1_3()" value="处理数据[state=1 and have data,not tip msg]"/><br/><br/>
	<input type="button" onclick="demo2()" value="处理数据[state=-1]"/>
	<input type="button" onclick="demo3()" value="处理数据[state=2]"/>
	<input type="button" onclick="demo4()" value="处理数据[state=0 and not have data]"/>
	<input type="button" onclick="demo5()" value="处理数据[state=1 and not have data]"/>
	<hr/>
	<div>Demo Table <span style="color:red;font-weight: bold;">[请注意下面表格数据的变化]</span></div>
	<hr/>
	<div>
		<table id="tb_demo" border="1px" border-color="green" width="50%" align="center">
			<thead style="background-color: gray">
				<tr>
					<td width="20%">编号</td>
					<td width="30%">姓名</td>
					<td width="30%">性别</td>
					<td width="20%">年龄</td>
				</tr>
			</thead>
		</table>
	</div>
</body>
</html>